<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="car.css">

</head>

<body>
    <!-- 所有页面共有头部 -->
    <header>
        <div class="nav">
            <!-- 头部左侧文字链接 -->
            <ul class="nav-left">
                <li class="conweixin">
                    <a href="javascript:;">关注</a>
                    <div class="weixin">
                        <div class="weixin-con">
                            <img src="img/weChat.jpg" alt="">
                            <p>关注公众号</p>
                        </div>
                    </div>
                </li>
                <li class="loadapp">
                    <a href="javascript:;">下载APP</a>
                    <div class="app">
                        <div class="app-con">
                            <img src="img/app.jpg" alt="">
                            <p>优购app下载</p>
                        </div>
                    </div>
                </li>
            </ul>

            <!-- 头部右侧文字链接 -->
            <ul class="nav-right">
                <li class="first">
                    <a href="login.html" class="login">登录</a>
                    <span>/</span>
                    <a href="register.html" class="register">注册</a>
                </li>
                <li><a href="index.html">回到首页</a></li>

                <li class="collect">
                    <a href="javascript:;"><i></i>收藏</a>
                </li>
                <li class="bag">
                    <a href="javascript:;"><i></i>购物袋</a>
                </li>
                <li class="publicword">
                    <a href="javascript:;">公告</a>
                    <div class="public">
                        <ul class="public-con">
                            <li><a href="javascript:;" class="red">近期物流情况安排通知</a></li>
                            <li><a href="javascript:;">优购客服电话变更</a></li>
                            <li><a href="javascript:;">关闭分享购频道</a></li>
                            <li><a href="javascript:;">提醒会员谨防诈骗电话</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </header>

    <div class="carlogo">
        <h1><img src="img/carlogo.png" alt=""></h1>
        <ul class="carlogo-right">
            <li class="focus">
                我的购物袋
                <i></i>
                <b></b>
            </li>
            <li>
                提交订单中心
                <i></i>
                <b></b>
            </li>
            <li>
                成功提价订单
                <i></i>
                <b></b>
            </li>
        </ul>
    </div>



    <div class="kong">
        <div class="kong-con">
            <img src="img/shopping-car.png" alt="">
            <p> 您的购物袋中暂无商品，赶快选择心爱的商品吧！ </p>
            <p><a href="index.html">回到首页</a></p>
            <p> 您可以查看：</p>
            <p>
                <a href="javascript:;" class="mylist">我已购买的商品</a>
            </p>
        </div>
    </div>


    <table class="car">
        <colgroup>
            <col width="60">
            <col width="370">
            <col width="110">
            <col width="110">
            <col width="110">
            <col width="110">
            <col width="120">
        </colgroup>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="all">
                    <span>全选</span>
                </th>
                <th>商品名称</th>
                <th>颜色尺码</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计(元)</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <% cars.forEach(function(item){ %>

                <tr>
                    <td class="choose">
                        <p><input type="checkbox"></p>
                        <p><img src="<%= item.img %>" alt=""></p>
                    </td>
                    <td class="gname">
                        <%= item.gname %>
                    </td>
                    <td class="cs">
                        <p class="gcolor">颜色：<span>图片色</span></p>
                        <p class="gsize">尺码：<span>F</span></p>
                    </td>

                    <td class="gprice">
                        <%= item.price %>
                    </td>
                    <td class="gcount">
                        <span class="del">-</span>
                        <span class="num"><%= item.count %></span>
                        <span class="add">+</span>
                    </td>
                    <td class="sum"></td>
                    <td class="write"><button class="move">删除</button></td>
                </tr>
                <% }) %>

        </tbody>
        <!-- <tbody>
            <tr>
                <td class="choose">
                    <p><input type="checkbox"></p>
                    <p><img src="img/b11.jpg" alt=""></p>
                </td>
                <td class="gname">BELLE/百丽箱包2020新商场同款菱格链条包单肩斜挎女包X4926AN0</td>
                <td class="cs">
                    <p class="gcolor">颜色：<span>黑色</span></p>
                    <p class="gsize">尺码：<span>F</span></p>
                </td>

                <td class="gprice">799</td>
                <td class="gcount">
                    <span id="add">-</span>
                    <span class="num">1</span>
                    <span id="del">+</span>
                </td>
                <td class="sum">598</td>
                <td class="write"><button id="move">删除</button></td>
            </tr>
        </tbody> -->



    </table>
    <div class="bot">
        <div style="float: left;">
            <a href="/goodslist">继续购物</a>
            <button id="delall">清空购物袋</button>
        </div>
        <div style="display: flex;line-height: 54px;align-items: center;float: right;">
            <p style="font-weight: bold;">总计（不含运费）：￥<span id="countall" style="font-size: 20px;font-weight: normal;"></span></p>
            <a href="javascript:;" id="toapply" style="line-height: 54px;">去结算</a>
        </div>
    </div>
</body>

</html>

<script src="jquery.min.js"></script>
<script src="index.js"></script>

<script>
    let uname = sessionStorage.getItem("uname");
    if (uname) {
        $(".kong").css("display", "none");
        $(".car").css("display", "block");
        $(".bot").css("display", "block");

        $(".bag a").attr("href", `/car?username=${uname}`);
        $(".first").html($('<a href="javascript:;" class="mylist">我的订单</a>'))

        $(".mylist").click(function() {
            let ispay = 1;

            $(this).attr("href", `/look?username=${uname}&ispay=${ispay}`)
        })

        if ($("tbody tr").length === 0) {
            // console.log(1);
            $(".kong").css("display", "block");
            $(".car").css("display", "none");
            $(".bot").css("display", "none");
        }

        //判断全选框的状态
        $("#all").click(function() {
            $(".choose input").prop("checked", $(this).prop("checked"));
            countPrice();
        })

        $(".choose input").click(function() {
            let flag = true;
            let inputs = document.querySelectorAll(".choose input");
            for (let i = 0; i < inputs.length; i++) {
                if (!inputs[i].checked) {
                    flag = false;
                    break;
                }
            }
            $("#all").prop("checked", flag);
            // console.log($(this).prop("checked"));

            countPrice();
        })


        //产品数量加减
        $(".add").click(function() {
            let nownum = $(this).closest(".gcount").find(".num");
            let newnum = parseInt(nownum.html()) + 1;
            $(this).closest(".gcount").find(".num").html(newnum);

            let gname = $(this).closest("tr").find(".gname").html();

            gname = gname.replace(/[ \n]/g, "");

            // console.log(gname);
            // console.log(newnum);


            $.ajax({
                url: "http://10.35.164.244:8080/change",
                data: {
                    count: newnum,
                    gname: gname
                }
            })

            // console.log($(this).closest(".gcount").find(".num"));
            countPrice();
        })

        $(".del").click(function() {

            let nownum = $(this).closest(".gcount").find(".num");
            let newnum = parseInt(nownum.html()) - 1;
            if ($(nownum).html() > 1) {
                $(this).closest(".gcount").find(".num").html(newnum);
            } else {
                $(nownum).html(1);
            }
            let gname = $(this).closest("tr").find(".gname").html();

            gname = gname.replace(/[ \n]/g, "");

            $.ajax({
                url: "http://10.35.164.244:8080/change",
                data: {
                    count: newnum,
                    gname: gname
                }
            })
            countPrice();
        })

        //小计   合计
        function countPrice() {
            // console.log($("tbody tr"));

            let countall = 0;
            $("tbody tr").each(function(item) {
                //总合计
                //当前的价格和数量
                let nowprice = parseInt($(this).find(".gprice").html());
                let nowcount = parseInt($(this).find(".num").html());
                $(this).find(".sum").html(nowprice * nowcount);
                // console.log(nowcount);

                if ($(this).find(".choose input").prop("checked")) {
                    countall = countall + parseInt($(this).find(".sum").html());
                }
                $("#countall").html(countall);
            })
        }
        countPrice();

        //删除按钮
        $(".move").click(function() {
            let gname = $(this).closest("tr").find(".gname").html();
            // console.log(gname);
            gname = gname.replace(/[ \n]/g, "");

            $.ajax({
                url: "http://10.35.164.244:8080/remove",
                data: {
                    gname
                },
                success(data) {
                    if (data === "success") {
                        alert("删除成功")
                        history.go(0);
                    }
                }
            })
        })

        //清空购物车按钮
        $("#delall").click(function() {
            $.ajax({
                url: "http://10.35.164.244:8080/delete",
                data: {
                    username: uname
                },
                success(data) {
                    history.go(0)
                }
            })
        })


        //点击去结算
        $("#toapply").click(function() {
            //判断至少选中一个商品区支付
            let yes = false;

            //支付状态
            let ispay = 0;
            $("tbody tr").each(function() {

                if ($(this).find(".choose input").prop("checked")) {
                    yes = true;

                    let img = $(this).find("img").attr("src");
                    let gname = $(this).find(".gname").html();
                    let gprice = $(this).find(".gprice").html();
                    let count = $(this).find(".num").html();
                    let sum = $(this).find(".sum").html();
                    gname = gname.replace(/[ \n]/g, "");
                    gprice = gprice.replace(/[ \n]/g, "");
                    // console.log(img);
                    // console.log(gname);
                    // console.log(gprice);
                    // console.log(count);
                    // console.log(sum);

                    $("#toapply").attr("href", `/toapply?username=${uname}&img=${img}&gname=${gname}&gprice=${gprice}&count=${count}&sum=${sum}&ispay=${ispay}`)

                }
            })
            if (!yes) {
                alert("请选择您要购买的商品")
            }
        })



    } else {
        $(".bag a").click(function() {

            alert("请先登录/注册您的账号")
        })
    }
</script>